<script setup>
import variables from '@/assets/styles/variables.module.scss'

const props = defineProps({
  deviceName: String,
  deviceStatus: String,
  deviceDescription: String
})

</script>

<template>
  <div class="device-container" :style="'background-color:' + (props.deviceStatus === '正常' ? variables.deviceNormalColor : variables.deviceAbnormalColor)">
    <div class="device-icon">
      <img v-if="props.deviceStatus === '正常'" src="@/assets/icons/svg/device.svg" alt="设备正常">
      <img v-else src="@/assets/icons/svg/deviceAbnormal.svg" alt="设备异常">
    </div>
    <span class="device-status" :style="'color:' + (props.deviceStatus === '正常' ? variables.deviceNormalMainColor : variables.deviceAbnormalMainColor)">{{ props.deviceDescription }}</span>
    <span class="device-name" :style="'color:' + (props.deviceStatus === '正常' ? variables.deviceNormalMainColor : variables.deviceAbnormalMainColor)">{{ props.deviceName }}</span>
  </div>
</template>

<style scoped lang="scss">

.device-container {
  position: relative;
  //background-color: rgba(57,81,227, 20%);
  //background-color: v-bind(bgColor);
  border-radius: 10px;
  height: 100%;
}

.device-icon {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: calc(100% * (28 / 222));
  transform: translateX(-50%);

  img {
    width: 76px;
    height: 76px;
  }
}

.device-status {
  font-size: 18px;
  color: v-bind(deviceMainColor);
  position: absolute;
  left: 50%;
  top: calc(100% * (130 / 222));
  transform: translateX(-50%);
  font-family: PingFangSC-Regular, sans-serif;
}

.device-name {
  font-size: 14px;
  color: v-bind(deviceMainColor);
  position: absolute;
  left: 50%;
  top: calc(100% * (165 / 222));
  transform: translateX(-50%);
  font-family: PingFangSC-Regular, sans-serif;
  width: 100%;
  text-align: center;
}


</style>